import React, { useState } from 'react';
import { Layout, Menu, Avatar, Dropdown, Input, Button, Upload, message, List } from 'antd';
import { UserOutlined, UploadOutlined, SendOutlined, PlusOutlined } from '@ant-design/icons';
import type { MenuProps } from 'antd';

const { Header, Sider, Content, Footer } = Layout;
const { TextArea } = Input;

const items: MenuProps['items'] = [
  {
    key: '1',
    label: '退出登录',
  },
];

const App: React.FC = () => {
  const [messages, setMessages] = useState<
    { text: string; type: 'user' | 'bot'; time: string }[]
  >([]);
  const [inputValue, setInputValue] = useState('');


  const handleSend = () => {
    if (!inputValue.trim()) return;

    const now = new Date().toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' });

    setMessages((prev) => [
      ...prev,
      { text: inputValue, type: 'user', time: now },
    ]);
    setInputValue('');

    setTimeout(() => {
      const botTime = new Date().toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' });
      setMessages((prev) => [
        ...prev,
        { text: '机器人回复内容', type: 'bot', time: botTime },
      ]);
    }, 500);
  };


  const handleMenuClick: MenuProps['onClick'] = ({ key }) => {
    if (key === '1') {
      message.success('退出登录成功');
      // TODO: 清除登录状态、跳转登录页
    }
  };

  const dropdownMenu = <Menu items={items} onClick={handleMenuClick} />;
  const RobotAvatar: React.FC = () => (
    <span role="img" aria-label="robot">
      🤖
    </span>
  );
  return (
    <Layout style={{ height: '100vh' }}>
      <Sider
        width={300}
        theme="light"
        style={{
          borderRight: '1px solid #e8e8e8',
          backgroundColor: '#fafafa', // 统一浅灰背景
          display: 'flex',
          flexDirection: 'column',
          height: '100vh',
        }}
      >
        <div style={{ padding: 16, fontWeight: 'bold', fontSize: 18 }}>装修好帮手</div>
        <div style={{ padding: '8px 16px 16px' }}>
          <Button type="primary" icon={<PlusOutlined />} block>
            新增对话
          </Button>
        </div>

        {/* 带文字的分隔线 */}
        <div
          style={{
            width: '100%',
            color: '#888',
            fontWeight: 'bold',
            textAlign: 'center',
            margin: '16px 0',
            position: 'relative',
            fontSize: 14,
            backgroundColor: '#fafafa',
          }}
        >
          <span
            style={{
              backgroundColor: '#fafafa',
              padding: '0 12px',
              position: 'relative',
              zIndex: 1,
            }}
          >
            历史对话
          </span>
          <div
            style={{
              position: 'absolute',
              top: '50%',
              left: 0,
              right: 0,
              borderTop: '1px solid #d9d9d9',
              transform: 'translateY(-50%)',
              zIndex: 0,
            }}
          />
        </div>

        <Menu mode="inline" style={{ flex: 1, backgroundColor: '#fafafa' }}>
          <Menu.Item key="1">对话记录1</Menu.Item>
          <Menu.Item key="2">对话记录2</Menu.Item>
        </Menu>
      </Sider>


      <Layout>
        <Header style={{ background: '#fff', paddingRight: 24, textAlign: 'right' }}>
          <Dropdown overlay={dropdownMenu} placement="bottomRight">
            <span style={{ cursor: 'pointer' }}>
              <Avatar icon={<UserOutlined />} style={{ marginRight: 8 }} /> 当前用户
            </span>
          </Dropdown>
        </Header>
        <Content style={{ background: '#fff', padding: 24, overflowY: 'auto', flex: 1 }}>
          <div style={{ maxWidth: 800, margin: '0 auto' }}>
            {messages.length === 0 ? (
              <div style={{ color: '#aaa', textAlign: 'center', paddingTop: 100 }}>请开始对话...</div>
            ) : (
              <List
                dataSource={messages}
                renderItem={(item) => (
                  <List.Item
                    style={{
                      justifyContent: item.type === 'user' ? 'flex-end' : 'flex-start',
                      border: 'none',
                    }}
                  >
                    <div style={{ display: 'flex', flexDirection: item.type === 'user' ? 'row-reverse' : 'row', alignItems: 'flex-start', gap: 8 }}>
                      <Avatar
                        icon={item.type === 'user' ? <UserOutlined /> : <RobotAvatar />}
                        style={{ backgroundColor: item.type === 'user' ? '#1890ff' : '#f0f0f0', color: item.type === 'user' ? '#fff' : '#000' }}
                      />
                      <div>
                        <div
                          style={{
                            background: item.type === 'user' ? '#1890ff' : '#f5f5f5',
                            color: item.type === 'user' ? '#fff' : '#000',
                            padding: '10px 16px',
                            borderRadius: 8,
                            maxWidth: 500,
                            whiteSpace: 'pre-wrap',
                          }}
                        >
                          {item.text}
                        </div>
                        <div style={{ fontSize: 12, color: '#888', marginTop: 4, textAlign: item.type === 'user' ? 'right' : 'left' }}>
                          {item.time}
                        </div>
                      </div>
                    </div>
                  </List.Item>
                )}
              />
            )}
          </div>
        </Content>



        <Footer style={{ background: '#fff', padding: 16 }}>
          <div
            style={{
              position: 'relative',
              border: '1px solid #fff',
              borderRadius: 4,
              padding: '8px',
              // background: '#fafafa',  // 去掉灰色背景
            }}
          >
            <TextArea
              value={inputValue}
              onChange={(e) => setInputValue(e.target.value)}
              onPressEnter={(e) => {
                if (!e.shiftKey) {
                  e.preventDefault();
                  handleSend();
                }
              }}
              placeholder="请输入内容..."
              rows={3}
              style={{
                paddingRight: 100, // 右边预留发送按钮
                paddingLeft: 40,   // 左边预留上传按钮
                resize: 'none',
                height: 100,       // 高度调大为100
              }}
            />
            {/* 上传按钮 - 左下角 */}
            <div style={{ position: 'absolute', bottom: 12, left: 12 }}>
              <Upload showUploadList={false} beforeUpload={() => false}>
                <Button type="link" icon={<UploadOutlined />} />
              </Upload>
            </div>
            {/* 发送按钮 - 右下角 */}
            <div style={{ position: 'absolute', bottom: 12, right: 12 }}>
              <Button type="primary" icon={<SendOutlined />} onClick={handleSend}>
                发送
              </Button>
            </div>
          </div>
        </Footer>


      </Layout>
    </Layout>
  );
};

export default App;
